const reactive = Vue.reactive
const ref = Vue.ref
const isRef = Vue.isRef

/**
 * ref 的结构
 * 属性的深层响应性
 * 
*/
export default {
  name: 'ref-isref',
  template: `
    <div>
      展示 isRef <br>
      ref 对象：{{refCount}} <br><br>
      <el-button @click="update" type="primary">修改属性</el-button><br><br>
      <el-button @click="setRef" type="primary">整体赋值</el-button><br><br>
    </div>
  `,
  setup () {
    // 查看 reactive 实例结构
    const refCount = ref(0)
    console.log('refCount ', refCount )
    console.log('refCount ', isRef(refCount))

    const update = () => {
      // 修改原型
      refCount.value = new Date().valueOf()
    }

    const setRef = () => {
      // 直接赋值
      refCount.value += 1
    }

    return {
      refCount, // 基础类型
      update, // 修改属性
      setRef // 直接设置
    }
  }
}
  